System and method of providing layout information for generated images based on a hybrid application

ABSTRACT

One or more non-transitory computer readable recording mediums configured to store an application program including instructions, which when executed by an information processing device that has a display part, causes the information processing device to transmit, to a server device, identification information of an object when the object displayed on a screen is selected. The information processing device is further configured to receive layout information relating to arrangement of the object from the server device. The information processing device is further configured to display the object on a screen displayed on the display part by executing a native program included in the application program. The information processing device is further configured to display, when the layout information is received, an object based on the layout information instead of the object displayed by the native program, using a web browser embedded in the application program.

CROSS-REFERENCE TO RELATED APPLICATIONS

This application is a continuation of and claims priority to co-pendingU.S. patent application Ser. No. 17/445,762, filed on Aug. 24, 2021,which is a continuation of U.S. patent application Ser. No. 16/532,050,filed on Aug. 5, 2019, now. U.S. Pat. No. 11,132,493, which is acontinuation of U.S. patent application Ser. No. 14/923,774, filed onOct. 27, 2015, now, U.S. Pat. No. 10,467,328, which is a continuation ofInternational Application No. PCT/JP2014 /06 1275, filed on Apr. 22,2014, which is based upon and claims the benefit of priority fromJapanese Patent Application No. 2013-095768 filed on Apr. 30, 2013. Thebenefit of priority is claimed to each of the foregoing, and the entirecontents of each of the foregoing are incorporated herein by reference.

TECHNICAL FIELD

This disclosure relates to a method of providing display information, adisplay information provision program, and a server.

BACKGROUND

In recent years, a variety of applications (programs) have beendeveloped in order, for example, to provide a game that can be played ona communication terminal (mobile terminal) operated by a user.

In general, such applications can be roughly divided into nativeapplications and web applications.

Native applications are downloaded onto a communication terminal,installed on the communication terminal, and used. Native applicationsdepend on the OS of the communication terminal, such as an iPhone(registered trademark). Android (registered trademark) device, or othersmart phone. For example, a server transmits native applications such asan iPhone application written in Objective-C and an Android applicationwritten in Java (registered trademark) to communication terminalsaccording to the platform.

While native applications can run faster than web applications, twoversions of native applications need to be developed: one in theObjective-C programming language for iPhones, and one in the Javaprogramming language for Android devices. Furthermore, nativeapplications need to be installed on the communication terminal eachlime they are updated.

Web applications, on the oilier hand, operate on a web server and areused in a web browser on the terminal. Such web applications can becross-developed for both platforms based on a language such as HyperText Markup Language 5 (HTML5), Javascript (registered trademark),Cascading Style Sheets 3 (CSS3), or the like. Furthermore, since webapplications do not depend on the OS of the terminal, they can bedeveloped with relative ease, Web applications, however, operate slowerthan native applications.

Therefore, in recent years, an application that combines a nativeapplication and a web application (hybrid application) has gainedattention. Such a hybrid application can display web content within anative application. This is implemented by using a mechanism to embed afunction similar to a simplified browser within the native application.This mechanism is referred to as UIWebView on iOS (registered trademark)and as WebView on Android.

An area displayed by the native application and an area displayed by theweb application (UIWebView or WebView) are included in the displayscreen of the communication terminal on which such a hybrid applicationis launched.

CITATION LIST Patent Literature

PTL 1: JP 2004-070845 A

SUMMARY Technical Problem

To change the content displayed in the area that is displayed by anative application. The user needs to update the data in the areadisplayed by the native application. This operation is troublesome forthe user.

Therefore, it would be helpful to provide a method of providing displayinformation, a display information provision program, and a server thatcan change the content of an area displayed by a native applicationwithout the user updating the data in the area displayed by the nativeapplication.

Solution to Problem

One or more non-transitory computer-readable recording media, accordingto an aspect of this disclosure, configured to store instructions, whichwhen executed by an information processing device configured tocommunicate with a server, cause the information processing device to:

-   -   display first information stored by the information processing        device on a display;    -   transmit, to the server, input information corresponding to an        input received at the information processing device;    -   receive, from the server, layout information corresponding to a        display layout that is related to one or more pieces of second        information identified based on the input information: and    -   display, based on the layout information, the one or more pieces        of second information on the display by overlaying the one or        more pieces of second information on the first information.

Advantageous Effect

This disclosure allows for changing the content displayed in an areadisplayed by a native application without the user updating the data inthe area displayed by the native application.

BRIEF DESCRIPTION OF THE DRAWINGS

In the accompanying drawings:

FIG. 1 is a block diagram illustrating the hardware structure of anetwork system that includes a server device according to one of thedisclosed embodiments;

FIG. 2 illustrates a display screen of a communication terminal 20according to one of the embodiments;

FIG. 3 is a flowchart illustrating procedures by a server 10 accordingto one of the embodiments;

FIG. 4 illustrates a specific example of the display screen on thecommunication terminal 20;

FIG. 5 illustrates examples of icons representing functions related to agame;

FIG. 6 is a flowchart illustrating procedures by the server 10 whengenerating a shortcut image based on a condition set in advance for eachof a plurality of functions related to a game;

FIG. 7 is a flowchart illustrating operations to change a shortcut inaccordance with the user's rate of utilization;

FIG. 8 illustrates a data structure in which a shortcut ID 31, count 32,and layout information 33 on a shortcut image are associated;

FIG. 9 illustrates a screen displayed on the communication terminal 20by a web application in a hybrid application program;

FIG. 10 illustrates the change to a screen in a header area H displayedon the communication terminal 20 by a web application in a hybridapplication program;

FIG. 11 is a flowchart illustrating operations of Additional Embodiment1;

FIG. 12 illustrates the change to a screen in a header area H displayedon the communication terminal 20 by a web application in a hybridapplication program:

FIG. 13 illustrates a data structure in which a user ID 41, shortcut ID31, count 32, and layout information 33 on a shortcut image areassociated;

FIG. 14 is a flowchart illustrating operations of Additional Embodiment2;

FIG. 15 illustrates a screen displayed on the communication terminal 20of user A;

FIG. 16 illustrates a screen displayed on the communication terminal 20of user B;

FIG. 17 illustrates a table in which user actions targeted for countingare associated with the number of points added to the count of ashortcut;

FIG. 18 illustrates actions by different users A and B;

FIG. 19 illustrates the data structure that is stored in a rate ofutilization storage 15 (database) in the server 10 and that illustratesthe relationship between users and guilds; and

FIG. 20 is a flowchart illustrating operations of Additional Embodiment3.

DETAILED DESCRIPTION

The following describes embodiments with reference to the drawings.

FIG. 1 is a block diagram illustrating the hardware structure of anetwork system that includes a server device according to thisembodiment.

The network system illustrated in FIG. 1 is mainly formed by a server 10and a communication terminal 20. The server 10 and the communicationterminal 20 are connected over a network, such as the Internet, to allowfor communication.

For example, a smart phone, feature phone, tablet, or the like may beused as the communication terminal 20.

In this embodiment, it is assumed that an application that combines anative application and a web application (hybrid application) isinstalled on the communication terminal 20. A native application refersto an application that is downloaded onto the communication terminal 20,installed on the communication terminal 20, and used. A web application,on the other hand, refers to an application that operates on a webserver and is used in a web browser on a terminal.

The hybrid application installed on the communication terminal 20 isdownloaded from another server that differs from the server 10. Theother server is, for example, a server that provides a program that getsinstalled on the communication terminal. The server 10 and the otherserver may be the same server.

An area displayed by the native application and a different areadisplayed by the web application are included in the display screen ofthe communication terminal 20 on which such a hybrid application, whichcombines a native application and a web application, is launched, in thearea displayed by the native application, an image generated on thecommunication terminal 20 in response to launching of the application isdisplayed. The image displayed in the area that is displayed by the webapplication is described below.

In this embodiment, the server 10 for example operates as a game controldevice that controls a game played by the user by launching theabove-mentioned application (hybrid application) on the communicationterminal 20. By the application being launched on the communicationterminal 20. a plurality of functions related to the game are providedto the user.

The server 10 includes a communication interface 11, game informationstorage 12, game controller 13, rate of utilization management module14, rate of utilization storage 15, and image generator 16.

The communication interface 11 has the function of communicating withthe communication terminal 20, The communication interface 11 receives,from the communication terminal 20, information indicating a useroperation on the communication terminal 20 for playing the game(operation information).

A variety of information for controlling the game (game information) isstored in the game information storage 12.

Based on the operation information received by the communicationinterface 11 and the game information stored in the game informationstorage 12, the game controller 13 controls the game played by the user.

Based on the operation information received by the communicationinterface 11, the rate of utilization management module 14 manages (rateof utilization information that indicates) the rate of utilization bythe user of the plurality of functions related to the game provided bythe above-mentioned application.

Based on management by the rate of utilization management module 14,rate of utilization information is stored in the rate of utilizationstorage 15.

The image generator 16 generates an image displayed in the areadisplayed by the web application in accordance with control of the gameby the game controller 13. The image generator 16 also generates animage displayed in a portion of the area displayed by the nativeapplication.

The images generated by the image generator 16 are transmitted to thecommunication terminal 20 via the communication interface 11. In thisway, the images generated by the image generator 16 are displayed in thecorresponding areas on the screen of the communication terminal 20.

When the application is launched on the communication terminal 20, animage generated on the communication terminal 20 is displayed, asdescribed above, in the area displayed by the native application on thedisplay screen of the communication terminal 20. The image that isgenerated by the image generator 16 and displayed in a portion of thearea displayed by the native application is overlaid on the imagegenerated by the communication terminal 20.

With reference to FIG. 2, a display screen (layer structure) of thecommunication terminal 20 in this embodiment is described.

As illustrated in FIG. 2, a footer area 101 positioned at the bottom isprovided on the display screen of the communication terminal 20. Thisfooter area 101 is on area displayed by the native application. Forexample, a navigation toolbar is displayed in this footer area 101

A content area 102 is positioned in the middle of the display screen ofthe communication terminal 20. The content area 102 is an area displayedby the web application. A variety of web contents, for example, aredisplayed in the content area 102.

Furthermore, a header area 103 is positioned at the top of the displayscreen of the communication terminal 20. This header area 103 is an areadisplayed by the native application. For example, a navigation bar isdisplayed in this header area 103. In this embodiment, the header area103 is also an area displayed by the web application, and an imagegenerated on the server 10 may be displayed in this header area 103.

The areas displayed by the web application are implemented by UlWebViewwhen the communication terminal is an iPhone, and at this time,WebViewJavascriptBridge is used.

Combining such areas 101 to 103 implements a display screen in which webcontent can be displayed within a native application (i.e. a displayscreen by a hybrid application).

Next, with reference to the flowchart in FIG. 3, procedures by theserver 10 according to this embodiment are described. Here, it isassumed that the above-described application (hybrid application thatcombines a native application and a web application) is downloaded inadvance and installed on the communication terminal 20.

it is also assumed that, for example, an application is launched inaccordance with user operation on the communication terminal 20. In thiscase, an image (first image) generated on the communication terminal 20in response to launching of the application is displayed in the footerarea 101 and the header area 103 on the display screen of thecommunication terminal 20.

When the application is launched on the communication terminal 20. therate of utilization management module 14 included in the server 10retrieves rate of utilization information stored in the rate ofutilization storage 15 (step S1). The rate of utilization informationretrieved by the rate of utilization management module 14 is informationindicating the rate of utilization by the user of a plurality offunctions related to the game.

Next, the image generator 16 generates an image (second image) displayedin the content area 102, which is an area other than the footer area 101and the header area 103 (which are areas displayed by the nativeapplication) (step S2). The image generated by the image generator 16 isan image related to the game played by the user by launching theapplication (game image).

The image generator 16 also generates an image (third image) displayedin the header area 103, watch is a portion of the area displayed by thenative application (step S3). Specifically, based on the rate ofutilization information retrieved in step S1, the image generator 16generates an image that includes a shortcut key allowing for use of afunction with a high rate of utilization among the plurality offunctions related to the game (shortcut image).

The game image and the shortcut image generated by the image generator16 are transmitted to the communication terminal 20 via thecommunication interface 11 (step S4). In this case, the game image isdisplayed in the content area 102 on the display screen of thecommunication terminal 20. On the other hand, the shortcut image isdisplayed in the header area 103 on the display screen of thecommunication terminal 20. While the images generated on thecommunication terminal 20 in response to launching of the applicationare displayed in the footer area 101 and the header area 103 on thedisplay screen of the communication terminal 20 as described above, theshortcut image is overlaid on the image in the header area 103.

FIG. 4 illustrates a specific example of the display screen on thecommunication terminal 20. As illustrated in FIG. 4, on the displayscreen of the communication terminal 20, for example a variety of menus(for example, a navigation toolbar) or the like for playing the game aredisplayed in the footer area 101, a game screen is displayed in thecontent area 102, and a shortcut image is displayed in the header area103.

As the shortcut image in the header area 103, icons representing avariety of functions are displayed. The icons displayed in the headerarea 103 are now described briefly. Here, it is assumed that the gameplayed by the user by launching the application is a game to defeat anenemy opponent using cards (characters) that the user possesses. In thiscase, for example the icons 201 to 212 or the like illustrated in FIG. 5are included in the icons displayed in the header area 103 (i.e. theicons representing functions related to the game).

Icon 201 represents a “shop” function. With this “shop” function, theuser can, for example, purchase a variety of items (recovery medicine,stamina medicine, and the like) that are usable in the game.

Icon 202 represents a “strengthen” function. With this “strengthen”function, the user can, for example, strengthen the cards that the userpossesses and can use in the game.

Icon 203 represents a “trade” function. With this “trade” function, theuser can, for example, exchange (trade) a card with another user(friend) playing the game.

Icon 204 represents a “battle deck” function. With this “battle deck”function, the user can, for example, use a plurality of cards that theuser possesses to construct a deck (attack deck, defense deck, or thelike) for playing the game.

Icon 205 represents a “team” function. With this “team” function, theuser can form a team within the game.

Icon 206 represents a “friend” function. With this “friend” function,the user can display and confirm the status of registered friends.

Icon 207 represents an “invite” function. With this “invite” function,the user can invite another user to join the user's team. With this“invite” function, the user can also confirm matters such as whether theuser has been invited to join another team.

Icon 208 represents an “illustrated guide” function. With this“illustrated guide” function, the user can display and confirm the enemycharacters that the user has defeated.

Icon 209 represents a “quest history” function. With this “questhistory” function, the user can display and confirm the degree to whicheach quest that is set in advance in the game has been cleared.

icon 210 represents an “event history” function. With this “eventhistory” function, the user can display and confirm the degree to whicheach event that has occurred in response to game progress or the likehas been cleared.

Icon 211 represents a “how to play” function With this “how” “to play”function, the user can display and confirm how to play the game.

Icon 212 represents a “coins” function. With this “coins” function, theuser can display and confirm the number of pieces of game currency(corns) acquired in accordance with game progress and the way of usingthe coins.

Icons displaying functions with a high rate of utilization among (icons201 to 212 that represent) the plurality of functions related to thegame come to be displayed in the header area 103 on the display screenof the communication terminal 20.

After such a screen is displayed in the communication terminal 20, thegame is controlled by the game controller 13 in response to useroperation of the communication terminal 20. By the game screen beingupdated in response to this control, the user can play the game.

As described above, functions with a high rate of utilization can beselected from among the shortcut images displayed in the header area 103and used. Other functions can, for example, be selected from the “other”tab in the menu displayed in the footer area 101. When a functionprovided by the application is used in this way, rate of utilizationinformation that is stored in the rate of utilization storage 15 andthat indicates the rate of utilization of the function is updated by therate of utilization management module 14. The rate of utilization ofeach function as stored in the rate of utilization storage 15 may bebased on the (total) length of lime that the function is used, or basedon the number of times the function is selected by the user.

In this embodiment, shortcut images are described as being displayed onthe header area 103, but alternatively, by setting the footer area 101to be an area displayed by the web application, the shortcut images maybe displayed in the footer area 101 instead of in the header area 103.

Furthermore, the image displayed in the header area 103 may be an imageother than a shortcut image (such as a variety of advertisements or thelike).

In this embodiment, since the header area 103 is an area displayed bythe native application, the image generated on the communicationterminal 20 in response to launching of the application can be displayedas is by setting the shortcut image not to be displayed in response tooperation.

In this embodiment, shortcut images (including shortcut keys) that allowfor use of functions having a high rate of utilization among a pluralityof functions related to the game have been described as being generated.Functions that can be used from these shortcut images may, however, bedecided on with a different method. Specifically, a condition may be setin advance for each of the plurality of functions related to a game, andthe shortcut image may be generated based on this condition.

With reference to the flowchart in FIG. 6, the following describesprocedures by the server 10 when generating a shortcut image based on acondition set in advance for each of a plurality of functions related tothe game.

In this case, the image generator 16 included in the server 10 executesthe processing in steps S11 to S13 below for each of the plurality offunctions related to the game. The function that is targeted by theprocessing in steps S11 to S13 is referred to as the targeted function.

First, the image generator 16 retrieves information on the targetedfunction (function related information) (step S11). This functionrelated information is retrieved from the game controller 13, whichcontrols matters such as game progress, or the like.

Next, the image generator 16 judges whether the retrieved functionrelated information satisfies a predetermined condition (i.e. acondition set in advance for the targeted function) (step S12).

When the function related information is judged to satisfy thepredetermined condition (step S12: YES), the image generator 16 decidesthat the targeted function is a function that will be targeted for ashortcut (i.e. the function that can be used from a shortcut image)(step S13).

Conversely, when the function related information does not satisfy apredetermined condition (step S12: NO), the processing in step S13 isnot executed, and processing proceeds to step S14.

Next, the image generator 16 judges whether the processing to judgewhether the predetermined condition is satisfied has been executed forail of the functions related to the game (step S14).

When the image generator 16 judges that the processing has not beenexecuted for all of the functions related to the game (step S14: NO),processing returns to step S11, and processing is repeated, with thefunction for which processing has not been executed becoming thetargeted function.

Conversely, when judging that the processing has been executed for allof the functions related to the game (step S14; YES), the imagegenerator 16 generates a shortcut image that includes a shortcut keyallowing for use of each function, among the plurality of functions,that was decided on in step S13 (step S15). Each shortcut imagegenerated in this way is displayed in the header area 103 on the displayscreen of the communication terminal 20, as described above.

When there is no function that is the target of a shortcut (S12: NO), adefault shortcut image displayed by the web application is generated.

When the number of functions that can be used from shortcut images isset in advance and the number of functions decided on in step S13 isgreater than the number set in advance, then the functions that can beused from shortcut images may be decided on in accordance with thepriority set for each function or in accordance with the above-describedrate of utilization.

As described above, icons representing the functions decided on in stepS13 are displayed as shortcut images in the header area 103. When thenumber of functions that can be used from a shortcut image is not set inadvance, the size of the icons may be changed so as to allow for displayof all of the icons representing the functions decided on in step S13.

The processing in steps S11 and S12 in FIG. 6 is now described indetail. Here, it is assumed that the functions represented by icons 201to 212 illustrated in FIG. 5 are included in the plurality of functionsrelated to the game. The user playing the game by using thecommunication terminal 20 is simply referred to as the user, and users(players) other than the user are referred to as other users.

When the targeted function is the “shop” function represented by icon201, then information (discount information) indicating that items inthe shop are discounted (at the current time) from their regular priceis included in the function related information that is related to thisfunction. Furthermore, when the targeted function is the “shop”function, then the fact that items in the shop are discounted (at thecurrent lime) is included in the condition set in advance for thisfunction. In other words, when the targeted function is the “shop”function, and for example discount information indicating that the“recovery medicine” can be purchased at a lower price than usual isretrieved in step S11, then the function related information is judgedto satisfy the predetermined condition in step S12. In this way, since ashortcut image allowing for use of the “shop” function is displayed, theuser can be notified by the shortcut image that a variety of items arediscounted, and the user can be encouraged to use the “shop” function.

When the targeted function is the “strengthen” function represented byicon 202, then information (reinforcing campaign information) indicatingthat the success rate of strengthening (combination rate) is higher thanusual (at the current time) is included in the function relatedinformation that is related to this function. Furthermore, when the“strengthening” function is targeted, then the fact that the successrate of strengthening is higher than usual (at the current time) isincluded in the condition set in advance for this function. In otherwords, when the targeted function is the “strengthening” function, andfor example reinforcing campaign information indicating thatstrengthening can be performed at three times the usual success rate isretrieved in step S11, then the function related information is judgedto satisfy the predetermined condition in step S12. In this way, since ashortcut image allowing for use of the “strengthening” function isdisplayed, the user can be notified by the shortcut image that thesuccess rate of strengthening is higher than normal, and the user can beencouraged to use the “strengthening” function.

When the targeted function is the “trade” function represented by icon203, then information (card count information) indicating the number ofcards that the user possesses is included in the function relatedinformation that is related to this function. Furthermore, when thetargeted function is the “trade” function, then the fact that the userpossesses a predetermined number of cards (for example, 50 cards) isincluded in the condition set in advance for this function. In otherwords, when the targeted function is the “trade” function, and forexample card count information indicating that the user possesses 60cards is retrieved in step S11, then the function related information isjudged to satisfy the predetermined condition in step S12. In this way,since a shortcut image allowing for use of the “trade” function isdisplayed, the user can be notified by the shortcut image that the userpossesses a predetermined number of cards or more, and the user can beencouraged to use the “trade” function. While the fact that the userpossesses a predetermined number of cards has been described as thecondition set in advance for the “trade” function, informationindicating the type of card that the user possesses may be included inthe card count information, and the condition may be that the userpossesses a card desired by another user (friend).

When the targeted function is the “battle deck” function represented byicon 204, then information (card acquisition information) indicatingthat the user has acquired a card in the game is included in thefunction related information that is related to this functionFurthermore, when the targeted function is the “battle deck” function,then the fact that the user has acquired a new card (for example, a rarecard with a high rarity value) is included in the condition set inadvance for this function. In other words, when the targeted function isthe “battle deck” function, and for example card acquisition informationindicating that the user has acquired a rare card with a high rarityvalue is retrieved in step S11, then the function related information isjudged to satisfy the predetermined condition in step S12. In this way,since a shortcut image allowing for use of the “battle deck” function isdisplayed, the user can be notified by the shortcut image that the userhas newly acquired a rare card with a high rarity value, and the usercan be encouraged to use the “battle deck” function (i.e. to form abattle deck).

When the targeted function is the “team” function represented by icon205, then information (friend status information) indicating the statusof another user (friend) is included in the function related informationthat is related to this function. Furthermore, when the targetedfunction is the “team” function, then the fact that another user(friend) is battling an enemy character referred to as a “raid boss” (anenemy character that is battled through cooperation with other users) isincluded in the condition set in advance for this function. In otherwords, when the targeted function is the “team” function, and forexample friend status information indicating that a friend of the useris battling a raid boss (participating in a battle) is retrieved in stepS11, then the function related information is judged to satisfy thepredetermined condition in step S12. In this way, since a shortcut imageallowing for use of the “team” function is displayed, the user can benotified by the shortcut image that a friend is battling a raid boss,and the user can be encouraged to use the “team” function.

When the targeted function is the “friend” function represented by icon206, then information (information on a request to join a team)indicating whether another user desires to join the team that the userbelongs to (a team composed of a plurality of users) is included in thefunction related information that is related to this Function.Furthermore, when the targeted function is the “friend” function, thenthe fact that another user desires to join the team that the userbelongs to is included in the condition set in advance for thisfunction. In other words, when the targeted function is the “friend”function, and for example information on a request to join a team,indicating that another user desires to join the team to which the userbelongs, is retrieved in step S11, then the function related informationis judged to satisfy the predetermined condition in step S12. In thisway, since a shortcut image allowing for use of the “friend” function isdisplayed, the user can be notified by the shortcut image that anotheruser desires to join the team to which the user belongs, and the usercan be encouraged to use the “friend” function to add the other user tothe team.

When the targeted function is the “invite” function represented by icon207, then information (headhunting information) indicating whether theuser is being invited to join another team (which the user has notjoined) is included in the function related information that is relatedto this function. Furthermore, when the targeted function is the“invite” function, then the fact that the user is being invited to joinanother team is included in the condition set in advance for thisfunction. In ether words, when the targeted function is the “invite”function, and for example headhunting information indicating that theuser is being invited to join another team is retrieved in step S11,then the function related information is judged to satisfy thepredetermined condition in step S12. In this way, since a shortcut imageallowing for use of the “invite” function is displayed, the user can benotified by the shortcut image that the user is being invited to joinanother team.

When the targeted function is the “illustrated guide” functionrepresented by icon 208, then information (card acquisition information)indicating that the user has acquired a card in the game is included inthe function related information that is related to this function.Furthermore, when the targeted function is the “illustrated guide”function, then the fact that the user has acquired a new card (forexample, a rare card with a high rarity value) is included in thecondition set in advance for this function. In other words, when thetargeted function is the “illustrated guide” function, and for examplecard acquisition information indicating that the user has acquired arare card with a high rarity value is retrieved in step S11, then thefunction related information is judged to satisfy the predeterminedcondition in step S12. In this way, since a shortcut image allowing foruse of the “illustrated guide” function is displayed, the user can benotified by the shortcut image that the user has newly acquired a rarecard with a high rarity value, and the user can be encouraged to confirmthis with the “illustrated guide” function.

When the targeted function is the “quest history” function representedby icon 209, then information (quest completion information) indicatingthe status of completion for each quest that is set in advance in thegame is included in the function related information that is related tothis function. Furthermore, when the targeted function is the “questhistory” function, then the fact that the user has cleared a new questis included in the condition set in advance for this function. In otherwords, when the targeted function is the “quest history” function, andfor example quest completion information indicating that the user hascleared a new quest is retrieved in step S11, then the function relatedinformation is judged to satisfy the predetermined condition in stepS12. In this way, since a shortcut image allowing for use of the “questhistory” function is displayed, the user can be notified by the shortcutimage that the user has cleared a new quest, and the user can beencouraged to confirm this with the “quest history” function.

When the targeted function is the “event history” function representedby icon 210, then information (event information) on a variety of eventsthat occur in response to game progress or the like is included in thefunction related information that is related to this function.Furthermore, when the targeted function is the “event history” function,then the fact that a new event has occurred is included in the conditionset in advance for this function. In other words, when the targetedfunction is the “event history” function, and for example eventinformation indicating that a new event has occurred is retrieved instep S11, then the function related information is judged to satisfy thepredetermined condition in step S12. In this way, since a shortcut imageallowing for use of the “event history” function is displayed, the usercan be notified by the shortcut image that a new event has occurred, andthe user can be encouraged to participate in the event.

When the targeted function is the “how to play” function represented byicon 211 then information (information on length of play time)indicating the length of time the user has played the game is includedin the function related information that is related to this function.Furthermore, when the targeted function is the “how to play” function,then the fact that the length of lime the user has played the game hasnot reached a predetermined length of time is included in the conditionset in advance for this function. In other words, when the targetedfunction is the “how to play” function, and the length of time (lengthof time the user has played the game) indicated by the information onlength of play time retrieved in step S11 has not reached apredetermined length of time, then the function related information isjudged to satisfy the predetermined condition in step S12. In this way,since a shortcut image allowing for use of the “how” “to play” functionis displayed, a user who has played the game for a short length of time(a beginner) can be encouraged to use the “how to play” function.

When the targeted function is the “coins” function represented by icon212, then information (acquired coin information) indicating the numberof coins that the user has acquired (i.e. coins that the user possesses)is included in the function related information that is related to thisfunction. Furthermore, when the targeted function is the “coins”function, then the fact that the number of coins that the user hasacquired is equal to or less than a predetermined number is included inthe condition set in advance for this function. In other words, when thetargeted function is the “coins” function, and the number of coinsindicated by the acquired coin information retrieved in step S11 isequal to or less than a predetermined number, then the function relatedinformation is judged to satisfy the predetermined condition in stepS12. In this way, since a shortcut image allowing for use of the “coins”function is displayed, the user can be notified by the shortcut imagethat the user's acquired number of coins is equal to or less than apredetermined number, and the user can be encouraged to confirm thenumber of acquired coins with the “coins” function.

As described above, setting a predetermined condition for each of aplurality of functions related to the game and generating a shortcutimage for a function that satisfies the condition makes it possible todecide on a function with a high probability (necessity) of being usedin accordance with conditions of game progress as the target of ashortcut.

FIG. 7 is a flowchart illustrating operations to change a shortcut inaccordance with the user's rate of utilization.

As illustrated in FIG. 7, when a predetermined shortcut image is pressedon the communication terminal 20 (client), shortcut identificationinformation (shortcut ID) indicating the shortcut of the pressedshortcut image and user identification information (user ID) of the userare transmitted via the network from the communication terminal 20 tothe server 10 (S21).

As illustrated in FIG. 8, a shortcut ID 31, count 32, and layoutinformation 33 on a shortcut image are stored in association in the rateof utilization storage 15 of the server 10.

When the server 10 receives the shortcut ID and the user ID from thecommunication terminal 20 (S31: Yes), the server 10 increments the countassociated with the received shortcut ID by one (S32). It is thuspossible to confirm the number of times that the shortcut image has beenpressed.

Next, based on the counts 32 stored in the rate of utilization storage15 (database), a shortcut ID is decided on (S33). Specifically, ashortcut with a high rate of utilization is determined based on theranking of counts 32 stored in the rate of utilization storage 15. Asillustrated in FIG. 8, layout information 33 on a shortcut image isassociated with the shortcut ID 31. For example, the layout information33 includes required information for layout, such as the coordinates,size, and color of the shortcut image.

Next, the layout information 33 on the shortcut image associated withthe shortcut ID 31 decided on in S33 is transmitted over the network tothe communication terminal corresponding to the received user ID (S34).

Conversely, when it is judged in S21 that a shortcut image has not beenpressed, then it is judged whether layout information 33 has beenreceived from the server 10 (S22). In S22, when it is judged that layoutinformation 33 has not been received, processing returns to step S21.

When layout information has been received in S22, then based on thereceived layout information 33, a shortcut image is created anddisplayed (S23).

FIG. 9 illustrates a screen displayed on the communication terminal 20by a web application in a hybrid application program.

In FIG. 9, the images displayed in the header area H and the footer areaF are displayed by the web application program in the hybrid applicationprogram. The images displayed in the content area C are displayed by thenative application program in the hybrid application program. The nativeapplication program can also display images in the header area H and thefooter area F.

When an image displayed by the native application program overlaps withan image displayed by the web application program, the image displayedby the web application program is prioritized and displayed (inoverlap).

A program for generating the screen that, within the screen illustratedin FIG. 9, is displayed by the web application program in the hybridapplication program is described based on layout information transmittedfrom the server 10. In other words, based on the received layoutinformation, the web application program in the hybrid applicationprogram of the communication terminal 20 generates the screen, withinthe screen illustrated in FIG. 9, for the header area H and the footerarea F displayed by the web application program in the hybridapplication program.

As illustrated in FIG. 9, shortcut images A to E are displayed in theheader area H, and shortcut images a to e are displayed in the footerarea F. As described with reference to FIG. 7, upon detecting that ashortcut image has been pressed, the hybrid application programtransmits the user ID and the ID of the pressed shortcut image to theserver 10. In other words, the header area H and the footer area F areareas subject to user operation.

FIG. 10 illustrates the change to a screen in a header area H displayedon the communication terminal 20 by the web application in the hybridapplication program.

In a default state, shortcuts A to F, are displayed in the header areaH. Thereafter, if the count of shortcut F increases and becomes greaterthan the count of shortcut E, then instead of shortcut E, shortcut F isdisplayed.

A program for generating the screen that, after a shortcut change, isdisplayed by the web application program in the hybrid applicationprogram is described based on layout information transmitted from theserver 10.

Based on the received layout information, the web application program inthe hybrid application program of the communication terminal 20generates the shortcut screen in the header area H after a shortcut hasbeen changed, as illustrated in FIG. 10.

One or a plurality of shortcuts may be targeted for change. Furthermore,as the layout information 33, the layout information of all of theimages displayed by the web application program may be transmitted, orthe layout information only for the shortcut being changed may betransmitted.

Additional Embodiment 1

In the above-described embodiment, shortcuts are changed based on therate of utilization (for example, the count) of shortcuts.

In Additional Embodiment 1, instead of changing the shortcut itself, thesize of the shortcut is changed

FIG. 11 is a flowchart illustrating operations of AdditionalEmbodiment 1. Steps that are the same as in FIG. 7 are labeledidentically, and a description thereof is omitted. Only the differencesare described below.

After the count associated with the received shortcut ID is incrementedby one in S32 of FIG. 7, it is judged whether the count associated withthe shortcut ID has exceeded a predetermined reference value (S41).

When it is judged in S41 that the count has exceeded the predeterminedreference value (S41: Yes), the shortcut ID 31 associated with the countthat exceeded the predetermined reference value is decided on (S42).

Next, the size of the shortcut image associated with the shortcut ID 31decided on in S42 is changed, and the corresponding layout information33 is transmitted over the network to the communication terminalcorresponding to the received user ID (S43).

FIG. 12 illustrates the change to a screen in a header area H displayedon the communication terminal 20 by the web application in the hybridapplication program.

In a default state, shortcuts A to E are displayed in the header area H.Thereafter, if the count of shortcut D increases and exceeds thepredetermined reference value, then shortcut D is displayed at anexpanded size. As a result, shortcut E is not displayed.

A program for generating the screen, in which the size of a shortcut hasbeen changed, that is displayed by the web application program in thehybrid application program is described based on layout informationtransmitted from the server 10.

Based on the received layout information, the web application program inthe hybrid application program of the communication terminal 20generates the screen, in the header area H, in which the size of ashortcut has been changed (expanded), as illustrated in FIG. 12.

Therefore, according to this embodiment, the size of a shortcut with ahigh rate of utilization can be changed, thereby improving the useroperability of the shortcut. Furthermore, since the shortcut image ischanged using the web application program, the shortcut structure can bechanged rapidly.

Additional Embodiment 2

In the above-described embodiment, shortcuts are changed or resizedbased on the rate of utilization (for example, the count) of shortcuts.

The configuration of shortcuts may, however, be managed user-by-user.

When the rate of utilization of shortcuts is managed for each userrather than for each shortcut, then as illustrated in FIG. 13, a user ID41, shortcut ID 31, count 32, and layout information 33 on a shortcutimage are stored in association.

FIG. 14 is a flowchart illustrating operations of Additional Embodiment2. Steps that are the same as in FIG. 7 are labeled identically, and adescription thereof is omitted. Only the differences are describedbelow.

When the server 10 receives the user ID and the shortcut ID from thecommunication terminal 20 (S31: Yes), the server 10 increments the countassociated with the received user ID and shortcut ID by one (S51). It isthus possible to confirm the number of limes that the shortcut image hasbeen pressed for each user.

Next, based on the counts 32 stored in the rate of utilization storage15 (database), a shortcut ID is decided on for each user (S52).Specifically, a shortcut with a high rate of utilization is determinedbased on the ranking of counts 32 stored in the rate of utilizationstorage 15. As illustrated in FIG. 13, layout information 33 on ashortcut image is associated with the shortcut ID 31. For example, thelayout information 33 includes required information for layout, such asthe coordinates, size, and color of the shortcut image.

Next, the layout information 33 on a shortcut image associated with theshortcut ID 31 decided on in S52 is transmitted over the network to thecommunication terminal corresponding to the received user ID (S34).

FIG. 15 illustrates a screen displayed on the communication terminal 20of user A, and FIG. 16 illustrates a screen displayed on thecommunication terminal 20 of user B. As illustrated in FIG. 15, theshortcut that is illustrated to the right in the header area H and thatis the target of a change is the image of a shortcut TA related to aguild function. On the other hand, as illustrated in FIG. 16, theshortcut that is illustrated to the right in the header area H and thatis the target of a change is the image of a shortcut TB related to thedeck function.

Displaying a different shortcut image for each user in this way makesthe game more user-friendly, thereby making the game more attractive forusers.

The count of a shortcut in the above-described embodiments is nowdescribed in greater detail.

The server 10 monitors user actions (events) from the communicationterminal 20.

FIG. 17 illustrates a table in which user actions targeted for countingare associated with the number of points added to the count of ashortcut.

As illustrated in FIG. 17, user actions targeted for counting areassociated with the number of points added to the count of a shortcut.For example, in FIG. 17, when the user selects the action “transition todeck selection screen”, the count associated with the shortcut IDrelated to the deck is incremented by one. Also, when the user selectsthe action “construct a deck”, the count associated with the shortcut IDrelated to the deck is incremented by one.

When shortcuts are managed user-by-user as illustrated in FIG. 13, thenthe table illustrated in FIG. 17 may be managed for each user.

FIG. 18 illustrates actions by different users A and B.

As is clear from FIG. 18, the action “select guild” is frequent for userA, whereas actions related to the deck, such as “transition to deckselection screen” and “construct deck”, are frequent for user B.

In this way, the count associated with the shortcut ID not onlyincreases when the shortcut image is pressed, but also increases basedon user actions.

Additional Embodiment 3

Additional Embodiment 3 is related to shortcut image display for memberswithin a guild. Here, a guild refers to a group of users within thegame. For example, a guild may be a group of users with tics offriendship, a group of users for battling the same monster, or the like.

FIG. 19 illustrates the date structure that is stored in the rate ofutilization storage 15 (database) in the server 10 and that illustratesthe relationship between users and guilds.

As illustrated in FIG. 19, a guild ID 51 and leader flag 52 areassociated with each user ID 41.

In FIG. 19. user 1, user 2, . . . , user N belong to guild 1. User 2 isthe leader of guild 1, as indicated by the leader flag 52.

User X1 X3, . . . , user XN belong to guild 2. User XN is the leader ofguild 2, as indicated by the leader flag 52.

Next, the operations in Additional Embodiment 3 are described withreference to the flowchart in FIG. 20. Steps that are the same as inFIG. 7 are labeled identically, and a description thereof is omitted.

When the server 10 receives the shortcut ID and the user ID from thecommunication terminal 20 (S31: Yes), the server 10 judges whether theuser is the leader of a guild (S61). Specifically, the server 10 judgesbased on whether the leader flag associated with the received user ID 41is set.

When judging that the user is the leader of the guild in S61, the server10 increments the count associated with the received user ID andshortcut ID by one (S62: FIG. 20).

Next, based on the counts 32 stored in the rate of utilization storage15 (database), a shortcut ID for the guild leader is decided on (S63).Specifically, a shortcut with a high rate of utilization is determinedbased on the ranking of counts 32 stored in the rate of utilizationstorage 15.

Next, the layout information 33 on the shortcut image associated withthe shortcut ID 31 decided on in S63 is transmitted over the network tothe communication terminals corresponding to all of the user IDs in theguild (S64).

Specifically, the user IDs having the same guild ID are identified byreferring to the table illustrated in FIG. 19. Layout information isthen transmitted to the communication terminals corresponding to all ofthe identified user IDs.

For example, upon the shortcut being changed for user 2, who is theleader of guild 1, layout information on the same shortcut image istransmitted to user ID 1 through user ID N included in guild 1.

By adopting this configuration, the same shortcut image can be providedto the users belonging to she same guild, thus making it easier forusers belonging to the guild to unify operations.

In the above-described embodiments, the case of changing the shortcutbased on the count has been described, yet the shortcut ID may bedecided on based on function related information associated with theshortcut ID 31.

For example, function related information may be associated with theshortcut ID 31. Time information such as a sale period, an appealperiod, or the like may be included in this function relatedinformation. When the time at which the user presses a shortcut imageand the server 10 receives the user ID and shortcut ID matches the timeinformation included in the function related information associated withany of the shortcut IDs 31, the shortcut ID corresponding to thefunction related information may be decided on as the shortcut IDtargeted for change. The information included in the function relatedinformation is not limited to time information, and a variety ofconditions for deciding on the shortcut ID may be included.

In the above-described embodiments, in response to launching of anapplication (hybrid application) installed on the communication terminal20, the server 10 generates an image (for example, a game image)displayed in the content area 102, which is a different area than thefooter area 101 and header area 103 (first area) in which an image (suchas a toolbar) is displayed. The server 10 also generates an image (forexample, a shortcut image) displayed in the header area 103, which is aportion of the area displayed by the native application. The server 10displays the game image in the content area 102 on the screen of thecommunication terminal 20 and displays the shortcut image in overlap inthe header area 103 on the screen of the communication terminal 20. Withthis configuration, the content displayed in the area displayed by thenative application can be changed without the user updating the data inthe area displayed by the native application In other words, accordingto this embodiment, the area displayed by the native application can bechanged in response to operation.

In this embodiment, by displaying, in the header area 103, an image thatincludes a shortcut key allowing for use of a function with a high rateof utilization among the plurality of functions provided by theapplication, an exclusive interface (UI) can be provided for each user.

The method described in the embodiments may be stored as acomputer-executable program on a recording medium, such as a magneticdisk (floppy (registered trademark) disk, hard disk, or the like),optical disc (CD-ROM. DVD, or the like), magneto-optical disc (MO), orsemiconductor memory, and distributed.

As long as a program can be stored on the recording medium and therecording medium is computer readable, the actual recording may be inany format.

The operating system (OS) operating on the computer, database managementsoftware, middleware (MW) such as network software, or the like mayexecute a portion of the processing for implementing the embodimentsbased on instructions by the program installed on the computer from therecording medium.

Furthermore, the above recording medium is not limited to a mediumindependent of the computer, but rather includes a recording medium onwhich a program downloaded over a LAN, the Internet, or the like isstored or temporarily stored.

The recording medium includes not only the case of one recording medium,hut also the case of the processing in the above embodiments beingexecuted from a plurality of media. Either configuration of media may beadopted.

The above-mentioned computer executes the processing of the embodimentsbased on the program stored on the recording medium. The computer may beconfigured with one device such as u personal computer, or as a systemof a plurality of devices connected over a network.

Instead of a personal computer, the above-mentioned computer may be anarithmetic processing unit included in an information processing device,a microcomputer, or the like. The term “computer” as used herecollectively refers to devices that can execute the disclosed functionswith a program.

This disclosure is not limited to the above embodiments, and at theimplementation stage, constituent elements may be modified orconcretized without departing from the scope of this disclosure.Furthermore, the plurality of constituent elements disclosed in theembodiments may be combined in a variety of ways. For example, some ofthe constituent elements disclosed in the embodiments may be omitted.Constituent elements may also be combined appropriately to yield otherembodiments.

REFERENCE SIGNS LIST

10 Server

11 Communication interface

12 Game information storage

13 Game controller

14 Utilization management module

15 Rate of utilization storage

16 Image generator

20 Communication terminal

1. One or more non-transitory computer-readable recording mediaconfigured to store an application program including instructions, whichwhen executed by an information processing device that has a displaypart, cause the information processing device to: transmit, to a serverdevice, identification information of an object when the objectdisplayed on a screen is selected; receive layout information relatingto arrangement of the object from the server device; display the objecton a screen displayed on the display part by executing a native programincluded in the application program; and display, if the layoutinformation is received, an object based on the layout information. 2.The one or more non-transitory computer-readable recording mediaaccording to claim 1, wherein the instructions cause the informationprocessing device to display, when the layout information is received,the object based on the layout information where the object displayedusing a web browser is overlaid on an originally existing objectdisplayed by the native program.
 3. The one or more non-transitorycomputer-readable recording media according to claim 2, wherein when theoriginally existing object displayed by the native program overlaps withthe object displayed by the web browser, object displayed by the webbrowser is prioritized and displayed.
 4. The one or more non-transitorycomputer-readable recording media according to claim 1, wherein theinstructions cause the information processing device to display, whenthe layout information is received, the object based on the layoutinformation where the object displayed using a web browser is displayedwhere there is no object.
 5. The one or more non-transitorycomputer-readable recording media according to claim 1, wherein thelayout information is configured to be determined based on useroperations.
 6. The one or more non-transitory computer-readablerecording media according to claim 5, wherein a header area of thelayout information is subject to the user operations.
 7. The one or morenon-transitory computer-readable recording media according to claim 5,wherein a footer area of the layout information is subject to the useroperations.
 8. A method for an information processing device that has adisplay part, comprising: transmitting, to a server device,identification information of an object when the object displayed on ascreen is selected; receiving layout information relating to arrangementof the object from the server device; displaying the object on a screendisplayed on the display part by executing a native program included inthe application program; and displaying, if the layout information isreceived, an object based on the layout information.
 9. The methodaccording to claim 8, wherein the displaying, when the layoutinformation is received, the object based on the layout information isperformed where the object displayed using a web browser is overlaid onan originally existing object displayed by the native program.
 10. Themethod according to claim 9, wherein when the originally existing objectdisplayed by the native program overlaps with the object displayed bythe web browser, object displayed by the web browser is prioritized anddisplayed.
 11. The method according to claim 8, wherein the displaying,when the layout information is received, the object based on the layoutinformation is performed where the object displayed using a web browseris displayed where there is no object.
 12. The method according to claim8, wherein the layout information is configured to be determined basedon user operations.
 13. The method according to claim 12, wherein aheader area of the layout information is subject to the user operations.14. The method according to claim 12, wherein a footer area of thelayout information is subject to the user operations.
 15. An informationprocessing device, comprising: a display part; a server device; ascreen; and circuitry configured to transmit, to the server device,identification information of an object when the object displayed on thescreen is selected; receive layout information relating to arrangementof the object from the server device; display the object on the screendisplayed on the display part by executing a native program included inthe application program; and display, if the layout information isreceived, an object based on the layout information.
 16. The informationprocessing device according to claim 15, wherein the circuitry isconfigured to display, when the layout information is received, theobject based on the layout information where the object displayed usinga web browser is overlaid on an originally existing object displayed bythe native program.
 17. The information processing device according toclaim 16, wherein when the originally existing object displayed by thenative program overlaps with the object displayed by the web browser,object displayed by the web browser is prioritized and displayed. 18.The information processing device according to claim 15, wherein thecircuitry is configured to display, when the layout information isreceived, the object based on the layout information where the objectdisplayed using a web browser is displayed where there is no object. 19.The information processing device according to claim 15, wherein thelayout information is configured to be determined based on useroperations.
 20. The information processing device according to claim 19,wherein a header area of the layout information is subject to the useroperations.
 21. The information processing device according to claim 19,wherein a footer area of the layout information is subject to the useroperations.